﻿@{
    Layout = null;
    var nodeModel = ViewBag.nodeModel as NB.MGJ.Model.Origins_Node;

    var flowId = ViewBag.flowId;
}

@*<script src="~/Scripts/WebUploader/webuploader.js"></script>*@
<script src="~/Scripts/WebUploader/webuploader.min.js"></script>


<form id="nodeForm">

    <div class="row">
        <div class="col-xs-3 col-md-3 text-right">
            节点内容：
        </div>
        <div class="col-xs-9 col-md-9">
            <textarea class="form-control" id="NodeContent" name="NodeContent" placeholder="最多输入200个字符" maxlength="200" style="height: 100px;"></textarea>
        </div>
    </div>



    <div class="row">


        <div class="col-xs-3 col-md-3 text-right">
            媒体内容：
        </div>
        <div class="col-xs-9 col-md-9">

            @if (nodeModel.Display.IndexOf("1") != -1)
            {
                <div class="list-con1" style="display:flex;align-items:center">
                    <label id="picker1" class="picker" style="background-image: url('/Content/webImgs/upLogo/cp_img_tj.png' ); background-size: 100% 100%; width: 60px; height: 60px; border-radius: 5px; background-repeat: no-repeat;border-radius:4px;display:block "></label>
                </div>
            }
            @if (nodeModel.Display.IndexOf("2") != -1)
            {
                <div class="list-con1" style="display:flex;align-items:center">
                    <label id="picker2" class="picker" style="background-image: url('/Content/webImgs/upLogo/cp_img_tj.png' ); background-size: 100% 100%; width: 60px; height: 60px; border-radius: 5px; background-repeat: no-repeat;border-radius:4px;display:block "></label>
                </div>

            }






            <div id="Tips" class="text-center" style="width:60px">待上传</div>
            <input id="ImgUrl" name="ImgUrl" type="hidden" value="" />
            <input id="VideoUrl" name="VideoUrl" type="hidden" value="" />
            <input id="NodeName" name="NodeName" type="hidden" value="@nodeModel.NodeName" />
            <input id="FlowId" name="FlowId" type="hidden" value="@flowId" />
            <input id="id" name="ID" type="hidden" value="0" />

        </div>
    </div>

</form>


<script>




    $(function () {

        $('.picker').mouseenter(function () {
            $(this).css('background-image', 'url("/Content/webImgs/upLogo/cp_img_tj_a.png")');
        }).mouseleave(function () {
            $(this).css('background-image', 'url("/Content/webImgs/upLogo/cp_img_tj.png")');
        })


        var uploader1 = WebUploader.create({
            // swf文件路径
            //swf: BASE_URL + '/js/Uploader.swf',
            // 文件接收服务端。
            server: 'OriginsMaterial/Upload',
            // 选择文件的按钮。可选。 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: '#picker1',
                multiple: false
            },
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });

        var uploader2 = WebUploader.create({
            // swf文件路径
            //swf: BASE_URL + '/js/Uploader.swf',
            // 文件接收服务端。
            server: 'OriginsMaterial/Upload',
            // 选择文件的按钮。可选。 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: '#picker2',
                multiple: false
            },
            accept: {
                title: 'Images',
                extensions: 'mp4',
                mimeTypes: 'video/mpeg,video/mp4'
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });

        function LoadItem(item, con, selector) {
            
            // 当有文件被添加进队列的时候
            item.on('fileQueued', function (file) {
                var $li = $(
           '<div  id="' + file.id + '" class="img-thumbnail">' +
           '<img alt="null"/>' +
           '</div>'
       ),
             $img = $li.find('img');
                $(selector).before($li);
                item.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
                }, 60, 60);

                $(con + '> div.img-thumbnail').mouseenter(function () {
                    var url = $(this).find('img').attr('src');
                    $(this).attr('name', url).find('img').attr('src', '/Content/webImgs/upLogo/cp_img_sc.png').css({ 'width': '60px', 'height': '60px' });
                }).mouseleave(function () {
                    var url = $(this).attr('name');
                    $(this).find('img').attr('src', url);
                }).click(function () {
                    $(this).remove();
                    $(selector).show();
                });

                $(selector).hide();
                item.upload();
            });

            // 文件上传过程中创建进度条实时显示。
            item.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active" style="margin:0;height:8px">' +
                      '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                      '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
                }

                //$li.find('p.state').text('上传中');
                $("#Tips").text("上传中");

                $percent.css('width', percentage * 100 + '%');
            });
            item.on('uploadSuccess', function (file, r) {
                //$('#' + file.id).find('p.state').text('已上传');
                
                var result = r._raw.split("。")[1];
                if (selector == "#picker1") {
                    $("#ImgUrl").val(result);
                }
                if (selector == "#picker2") {
                    $("#VideoUrl").val(result);
                }

                $("#Tips").text("已上传")
            });

            item.on('uploadError', function (file) {
                //$('#' + file.id).find('p.state').text('上传出错');
                $("#Tips").text("上传出错");
            });

            item.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').fadeOut();
            });
            $('#UpLoad').click(function () {
                item.upload();
            })
        }


        LoadItem(uploader1, ".list-con", "#picker1");
        LoadItem(uploader2, ".list-con", "#picker2");

    });








</script>